<template>
	<el-card class="!border-none" shadow="never">
		<el-page-header :content="pageTitle" @back="$router.back()" />
	</el-card>
	<el-card class="mt-4 !border-none" shadow="never">
		<div class="text-xl font-medium mb-[20px]">信息展示</div>
		<el-descriptions class="w-full" direction="horizontal" :column="2" border v-if="detailData">
			<el-descriptions-item class-name="el-descriptions-content-break" label-class-name="w-[120px]" label="账号">
				{{ detailData.account }}
			</el-descriptions-item>
			<el-descriptions-item class-name="el-descriptions-content-break" label-class-name="w-[120px]" label="姓名">
				{{ detailData.name }}
			</el-descriptions-item>
			<el-descriptions-item class-name="el-descriptions-content-break" label-class-name="w-[120px]" label="角色名称">
				<template v-for="(item, index) in detailData.role_name" :key="index">
					<span>{{ index != 0 ? '、' : '' }}{{ item }}</span>
				</template>
			</el-descriptions-item>
			<el-descriptions-item class-name="el-descriptions-content-break" label-class-name="w-[120px]" label="部门名称">
				{{ detailData.dept_name }}
			</el-descriptions-item>
			<el-descriptions-item class-name="el-descriptions-content-break" label-class-name="w-[120px]" label="岗位名称">
				{{ detailData.jobs_name }}
			</el-descriptions-item>
			<el-descriptions-item class-name="el-descriptions-content-break" label-class-name="w-[120px]" label="手机号">
				{{ detailData.mobile }}
			</el-descriptions-item>
			<el-descriptions-item class-name="el-descriptions-content-break" label-class-name="w-[120px]" label="邮箱">
				{{ detailData.email }}
			</el-descriptions-item>
			<el-descriptions-item class-name="el-descriptions-content-break" label-class-name="w-[120px]" label="最后登录时间">
				{{ detailData.login_time }}
			</el-descriptions-item>
			<el-descriptions-item class-name="el-descriptions-content-break" label-class-name="w-[120px]" label="最后登录ip">
				{{ detailData.login_ip }}
			</el-descriptions-item>
			<el-descriptions-item class-name="el-descriptions-content-break" label-class-name="w-[120px]" label="多端登录">
				{{ detailData.multipoint_login ? '支持' : '禁止' }}
			</el-descriptions-item>
			<el-descriptions-item class-name="el-descriptions-content-break" label-class-name="w-[120px]" label="状态">
				{{ detailData.disable ? '禁用' : '正常' }}
			</el-descriptions-item>
			<el-descriptions-item class-name="el-descriptions-content-break" label-class-name="w-[120px]" label="创建时间">
				{{ detailData.create_time }}
			</el-descriptions-item>
		</el-descriptions>
	</el-card>
	<el-card shadow="never" class="!border-none mt-4">
		<div class="text-xl font-medium mb-[20px]">操作记录</div>
		<el-form :model="state.queryParams" ref="queryForm" :inline="true">
				<el-form-item label="访问方式：">
					<el-select v-model="state.queryParams.type" placeholder="请选择请求方式" class="w-[180px]">
						<el-option v-for="item in visitType" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="时间范围：">
					<datePicker v-model:dateTime="state.queryParams.create_time" :isPickerOptions="true" />
				</el-form-item>
				<el-form-item>
					<el-button-group>
						<el-button type="primary" icon="ele-Search" @click="searchTable"> 查询 </el-button>
						<el-button icon="ele-Refresh" @click="resetQuery" class="ml15"> 重置 </el-button>
					</el-button-group>
				</el-form-item>
			</el-form>
		<el-table :data="state.tableList" v-loading="state.loading" style="width: 100%">
			<el-table-column prop="id" label="ID" width="120" />
			<el-table-column prop="action" label="操作" show-overflow-tooltip>
				<template #default="{ row }">
					{{ row.auth_menu ? row.auth_menu : row.action }}
				</template>
			</el-table-column>
			<el-table-column prop="admin_name" label="操作人" show-overflow-tooltip></el-table-column>
			<el-table-column prop="url" label="访问链接" show-overflow-tooltip></el-table-column>
			<el-table-column prop="type" label="请求方式" show-overflow-tooltip></el-table-column>
			<el-table-column prop="ip" label="来源IP" show-overflow-tooltip></el-table-column>
			<el-table-column prop="create_time" label="创建时间" show-overflow-tooltip></el-table-column>
			<el-table-column label="操作" width="100" fixed="right">
				<template #default="{ row }">
					<div class="flex">
						<el-button type="primary" link @click="handleDetail(row)"> 详情 </el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-model="state" @tableChange="getTableList" />
	</el-card>
	<DetailDialog v-if="showDialog" ref="detailRef" @submit="getTableList" @close="showDialog = false" />
</template>

<script setup lang="ts" name="authUserDetail">
import { ref, reactive, computed, onMounted, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import { usePage } from '/@/hooks/usePage';
import { systemLogLists } from '/@/api/setting/system';
import { adminDetail } from '/@/api/auth/admin';
import DetailDialog from '/@/views/sys/log/component/detail.vue';

const pageTitle = computed(() => {
	return '管理员详情';
});

const detailRef = ref();

const showDialog = ref(false);

const route = useRoute();

const detailData = ref(null);

// 定义列表
const state = reactive<TableDataState>({
	loading: false,
	tableList: [],
	queryParams: {
		admin_id: route.query.id,
		type: '',
		create_time: '',
	},
	tableParams: {
		page_num: 1,
		page_limit: 8,
		page_total: 0 as any,
	},
});

const { getTableList, searchTable, resetQuery } = usePage({ tableData: state, apiData: systemLogLists });

// 访问方式
const visitType = ref<Array<any>>([
	{
		label: '全部',
		value: '',
	},
	{
		label: 'GET',
		value: 'GET',
	},
	{
		label: 'POST',
		value: 'POST',
	},
	{
		label: 'DELETE',
		value: 'DELETE',
	},
]);

const setFormData = async (id: any) => {
	const data = await adminDetail({
		id: id,
	});

	detailData.value = data;
};

const handleDetail = async (row: any) => {
	showDialog.value = true;
	nextTick(() => {
		detailRef.value?.setFormData(row, function () {
			detailRef.value?.open();
		});
	});
};

onMounted(() => {
	if (route.query.id) {
		setFormData(route.query.id);
	}
	getTableList();
});
</script>
